stufflog3/frontend/src/routes/[scope=prettyid]/history/[interval].svelte

<script lang="ts" context="module">
  import type { Load } from "@sveltejs/kit/types/internal";

  import { sl3 } from "$lib/clients/sl3";
  import parseInterval, { datesOf } from "$lib/utils/timeinterval";
  import type Item from "$lib/models/item";
  import type { ItemFilter, ItemGroup } from "$lib/models/item";

  export const load: Load = async({ fetch, params, session, stuff }) => {
    const scopeId = parseInt(params.scope.split("-")[0]);

    const interval = parseInterval(params.interval, new Date());
    const filter = {
      createdTime: interval,
      acquiredTime: interval,
      scheduledDate: datesOf(interval),
    };
    const {items, groups} = await sl3(fetch, stuff.idToken).listItems(scopeId, filter, true, session.groupOptions);

    return {
      stuff: { title: "History" },
      props: { 
        items, groups, filter,
        intervalString: params.interval,
      },
    };
	}
</script>

<script lang="ts">
  import { goto } from "$app/navigation";
  import { session } from "$app/stores";
  import { browser } from "$app/env";
  import Main from "$lib/components/layout/Main.svelte";
  import { getScopeContext } from "$lib/components/contexts/ScopeContext.svelte";
  import DeletionModal from "$lib/modals/DeletionModal.svelte";
  import ItemAcquireModal from "$lib/modals/ItemAcquireModal.svelte";
  import ItemCreateModal from "$lib/modals/ItemCreateModal.svelte";
  import HistorySelector from "$lib/components/common/HistorySelector.svelte";
  import ItemListContext from "$lib/components/contexts/ItemListContext.svelte";
  import HistoryGroupList from "$lib/components/history/HistoryGroupList.svelte";
  import ToggleIcon from "$lib/components/history/ToggleIcon.svelte";

  export let intervalString: string
  export let items: Item[]
  export let groups: ItemGroup[]
  export let filter: ItemFilter;

  const {lastHistoryRange} = getScopeContext();

  function changeInterval(e: Event) {
    const target = e.target as HTMLSelectElement;
    
    lastHistoryRange.set(target.value);

    goto(`./${target.value}`, {replaceState: true});
  }

  function triggerReload() {
    goto(`./${intervalString}`, {replaceState: true});
  }

  $: {
    if (browser) {
      if ($session.groupOptions == null) {
        try {
          $session.groupOptions = JSON.parse(localStorage.getItem("sl3.history.group_options")||"{}");
          triggerReload();
        } catch(_) {
          $session.groupOptions = {};
        }
      } else {
        localStorage.setItem("sl3.history.group_options", JSON.stringify($session.groupOptions));
      }
    }
  }
</script>

<ItemListContext filter={filter} groups={groups} items={items}>
  <Main big>
    <HistorySelector value={intervalString} on:change={changeInterval} >
      {#if $session.groupOptions != null}
        <ToggleIcon inverse name="lightbulb" bind:value={$session.groupOptions.hideCreated} on:click={triggerReload} />
        <ToggleIcon inverse name="check_slot" bind:value={$session.groupOptions.hideAcquired} on:click={triggerReload} />
        <ToggleIcon inverse name="calendar" bind:value={$session.groupOptions.hideScheduled} on:click={triggerReload} />
      {/if}
    </HistorySelector>
    <HistoryGroupList intervalString={intervalString} />
  </Main>
  
  <ItemCreateModal />
  <ItemAcquireModal />
  <DeletionModal />
</ItemListContext>